import React from 'react'
import {get, put_http} from '../../../axios'
import moment from 'moment'
import Resource from '../../../components/resource'
import history from '../../../history'

class ContactsDetail extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            record: [],
            to_user: {}
            
        }
    }
    componentDidMount() {
        let id = this.props.match.params.id
        this.get_user_info(id)
        this.get_detail(id)
    }

    get_detail = id => {
        get(`/mem/links?to_user_id=${id}`).then(resp => {
            if (resp&&resp.success) {
                this.setState({record: resp.data})
            }
        })
    }

    get_user_info = user_id => {
        get(`mem/user-info/${user_id}`).then(resp => {
            if (resp.success) {
                this.setState({to_user: resp.data})
            }
        })
    }

    render() {
        const {record, to_user} = this.state
        return(
            <div class="chat-box">
               {/* 联系人信息 */}
                <div class="photos">
                    <div class="img"><img src={to_user.avatar} alt="头像"/></div>
                    <div class="info">
                        <div>{to_user.nickname}</div>
                        <div>
                            <em>注册时间：</em>
                            <i>{moment(to_user.created_at).format('LL')}</i>
                        </div>
                        <div>
                            <em>当前评分：</em>
                            <i>{to_user.rank}</i>
                        </div>
                    </div>
                </div>
                {/* 聊天记录 */}
                {
                    record.map( x => 
                        <div class="list-box" key={x.id}>
                            <div class="hd-msg">
                                <div>
                                    <span>发布者：</span>
                                    <em>{x.username}</em>
                                </div>
                                <div>{moment(x.created_at).format('YYYY-MM-DD HH:mm:ss')}</div>
                            </div>
                            <div class="list">
                                <p>{x.content}</p>
                            </div>
                            <Resource resource={x.link_resource}/>
                        </div>
                    )
                }
                

                <div className="btns">
                    <a className="contact" onClick={()=>history.push(`/contacts/msg/${to_user.id}`)}>留言</a>
                </div>
            </div>
        )
    }
}

export default ContactsDetail